<template>
  <ContextMenu
    :menu="[
      { label: '复制', handle: cope },
      { label: '放大阅读', handle: removeChat },
      { label: '翻译', handle: removeChat },
      { label: '转发...', handle: removeChat },
      { label: '收藏', handle: removeChat },
      { label: '多选', handle: deleteChat },
      { label: '引用', handle: deleteChat },
      { label: '搜一搜', handle: deleteChat },
      { label: '删除', handle: deleteChat },
      { label: '撤回', handle: deleteChat },
    ]"
    @select="$event.handle($event)"
  >
    <div
      class="message-item"
      :class="[message.oneSelf ? 'message-item-right' : 'message-item-left']"
      @mouseenter="updateMsgReaded(message)"
    >
      <div class="avatar-box">
        <el-image class="user-avatar" :src="circleUrl" />
      </div>
      <div class="message-box">
        <!-- <div class="message-user">
          {{ message.senderName }}
        </div> -->
        <div class="message-info">
          <div v-if="message.messageType == MessageTypeEnum.TEXT">
            {{ message.content }}
          </div>
          <el-link
            v-else-if="message.messageType == MessageTypeEnum.LINK"
            :href="message.content"
            :target="'_blank'"
          >
            {{ message.content }}
          </el-link>
          <div v-else>
            <el-image
              class="message-img"
              :src="imageUrl"
              :loading="'lazy'"
              :preview-src-list="messageImgList"
              :initial-index="initialIndex"
              :infinite="false"
              :hide-on-click-modal="true"
            />
          </div>
          <div class="time">{{ message.sendTime }}</div>
        </div>
      </div>
    </div>
  </ContextMenu>
</template>

<script setup lang="ts">
import { baseURL } from "@/api";
import ChatMessageApi from "@/api/chat/message";
import FileApi from "@/api/file";
import { ChatMessage } from "@/api/chat/message/model";
import { useUserStore } from "@/store";
import { emit } from "@/utils/mitt";
import { MessageTypeEnum } from "@/enums/MessageTypeEnum";
import { ChatUserModel } from "@/api/chat/chatUser/model";

const userStore = useUserStore();

const props = defineProps({
  activeUser: Object, // as PropType<ChatUserModel>,
  message: Object as PropType<ChatMessage>,
  messageImgList: Array<string>,
});

const circleUrl = computed(() => {
  if (props.message.oneSelf) {
    if (userStore.userInfo.avatarUrl) {
      return userStore.userInfo.avatarUrl;
    } else {
      return FileApi.GetDefaultUserAvatar();
    }
  } else {
    if (props.activeUser.toUserAvatar) {
      return props.activeUser.toUserAvatar;
    } else {
      return FileApi.GetDefaultUserAvatar();
    }
  }
});

const imageUrl = computed(() => {
  if (props.message.messageType == MessageTypeEnum.IMG) {
    return baseURL + props.message.content;
  } else {
    return "";
  }
});

const initialIndex = computed(() => {
  if (props.message.messageType == MessageTypeEnum.IMG) {
    return props.messageImgList.indexOf(imageUrl.value);
  } else {
    return 0;
  }
});

/**
 * 更新消息为已读
 * @param msg
 */
const updateMsgReaded = async (msg: ChatMessage) => {
  if (msg.isNewMessage && msg.oneSelf === false) {
    const { success } = await ChatMessageApi.updateMsgReaded(msg.id);
    if (success) {
      //更新已读
      msg.isNewMessage = false;
      userStore.chatMessage = userStore.chatMessage.filter((x) => x.id != msg.id);

      emit("chat:readed:message", msg.pairID);
    }
  }
};

const cope = () => {
  ElNotification.info("该功能暂未实现！");
};

const removeChat = (item) => {
  ElNotification.info("该功能暂未实现！");
};
const deleteChat = (item) => {
  ElNotification.info("该功能暂未实现！");
};
</script>

<style scoped lang="scss">
.message-item-left {
  margin-right: auto;

  .avatar-box {
    order: 0;
  }

  .message-box {
    align-items: start;
    padding-left: var(--message-box-width);
  }

  .message-info {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 12px;
      transform: translateY(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      border: inherit;
      border-top: none;
      border-right: none;
      background-color: var(--message-background-color);
    }
  }
}

.message-item-right {
  margin-left: auto;

  .avatar-box {
    order: 1;
  }

  .message-box {
    align-items: end;
    padding-right: var(--message-box-width);
  }

  .message-info {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 12px;
      transform: translateY(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      border: inherit;
      border-top: none;
      border-right: none;
      background-color: var(--message-background-color);
    }
  }
}

.message-item {
  --message-box-width: 10px;
  --message-background-color: #a5d5fb;
  display: flex;
  flex-direction: row;
  width: 100%;

  .avatar-box {
    display: flex;
    align-items: start;

    .user-avatar {
      width: 40px;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .message-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;

    .message-info {
      max-width: 80%;
      background-color: var(--message-background-color);
      color: #393636;
      border-radius: 8px;
      padding: 6px 10px;
      margin-top: 4px;
      text-align: justify;
      word-wrap: break-word;
      word-break: break-all; //强制换行，地址文本必须有这个

      :deep(.el-link) {
        display: block;
        font-size: 16px;
      }
      :deep(.el-link__inner) {
        display: block;
      }

      &:hover {
        cursor: pointer;
      }

      // .text-content{
      //   word-wrap: break-word;
      //   width: 100%;
      // }

      .message-img {
        height: 180px;
      }

      .time {
        display: none;
      }

      &:hover .time {
        display: block;
        position: absolute;
        top: 100%;
        font-size: 11px;
        white-space: nowrap;
        color: #8d8a8a;
      }
    }
  }
}
</style>
